<!-- 游客 -->
<template>
  <div class="tourist">
    <div class="container">
      <!-- 标题 -->
      <div class="tit">实时游客统计</div>
      <!-- 预约总数 -->
      <span>
        可预约
        <i>99999</i>
        人
      </span>
      <!-- item数据 -->
      <ul class="touristItem">
        <div class="item">8</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">7</div>
        <div class="item">5</div>
        <div class="item">3</div>
        <div class="item">人</div>
      </ul>
      <!-- 水球 -->
      <div class="echarts" ref="echarst"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
/* 引入 echarts */
import * as echarts from 'echarts'
/* 引入水球图水球插件 */
import 'echarts-liquidfill'
import { onMounted, reactive, ref } from 'vue'
/* echartsDOM元素实例 */
const echarst = ref()
/* echarts渲染数据 */
const option = reactive<any>({
  /* 标题 */
  title: {
    text: '水球图',
    /* 主标题 */
    textStyle: {
      color: '#fff',
    },
  },
  // /* x轴数据 */
  // xAxis: {},
  // /* y轴数据 */
  // yAxis: {},
  /* 系列：决定你要展示什么图 */
  series: {
    type: 'liquidFill',
    data: [0.6, 0.5, 0.4, 0.3],
    radius: '95%',
    outline: {
      show: true,
      borderDistance: 8,
      itemStyle: {
        color: '#fff',
        borderColor: '#294D99',
        borderWidth: 8,
        shadowBlur: 20,
        shadowColor: 'rgba(0, 0, 0, 0.25)',
      },
    },
  },
  /* 布局组件 */
  grid: {
    top: 0,
    buttom: 0,
    left: 0,
    right: 0,
  },
})
/* 初始化 echart*/
onMounted(() => {
  /* 获取echarst类实例 */
  const myCharts = echarts.init(echarst.value)
  /* 设置实例配置项 */
  myCharts.setOption(option)
})
</script>

<style lang="scss" scoped>
.tourist {
  width: 100%;
  height: 100%;
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('../../images/dataScreen-main-lb.png') no-repeat;
    background-size: 100% 100%;
    /* 标题 */
    .tit {
      position: relative;
      top: 25px;
      width: 100%;
      height: 40px;
      color: #ffff;
      font-size: 22px;
      background: url('../../images/dataScreen-title.png') no-repeat left bottom;
    }
    /* 预约人数 */
    > span {
      float: right;
      font-size: 19px;
      color: #ffff;
      i {
        color: orange;
      }
    }
    /* item数据 */
    .touristItem {
      display: flex;
      margin: 35px 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-radius: 10px;
      overflow: hidden;
      background-image: linear-gradient(to top, #235ec8 0%, #330867 100%);
      .item {
        flex: 1;
        text-align: center;
        color: #85e0e0;
        font-size: 25px;
        font-weight: 600;
        border: 1px solid #834ec3;
        box-shadow: 1px 1px 10px 1px rgba(250, 250, 250, 0.1);
      }
    }
    /* 水球 */
    .echarts {
      width: 100%;
      height: 210px;
    }
  }
}
</style>
